<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/index.css">

</head>

<body>
    <!-- 顶部 -->
    <div id="header">
        <div class="container clearfix">
            <a href="#/" class="logo">
                <img src="../static/images/logo.png" alt="">
                <div class="pagename">
                    <h1>熊猫优选</h1>
                    <sapn class="pinyin">XIONG&nbsp;MAO&nbsp;YOU&nbsp;XUAN</sapn>
                </div>
            </a>
            <form action="#">
                <div class="searchDiv"></div>
                <input type="text" name="search" id="search" placeholder="搜索商品，发现更多优惠">
                <div class="sbtn" onclick="search()">搜索</div>
            </form>
            <div class="promise clearfix">
                <div class="promiseItem">
                    <img src="../static/images/baoyou.png" alt="">
                    <div>全程包邮</div>
                </div>
                <div class="promiseItem">
                    <img src="../static/images/seven-day.png" alt="">
                    <div>7天退换</div>
                </div>
                <div class="promiseItem">
                    <img src="../static/images/ok.png" alt="">
                    <div>品质保障</div>
                </div>
            </div>

        </div>
    </div>

    <!-- 导航栏 -->
    <div id="nav">
        <div class="container clearfix">
            <ul class="clearfix">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="nineShip.html">9块9包邮</a></li>
                <li><a href="bigCoupon.html">超值大额券</a></li>
                <li><a href="wear.html">降温急救穿搭</a></li>
            </ul>
            <div class="toCar"><a>我的购物车</a></div>
        </div>
    </div>

    <!-- 产品分类 -->
    <div id="home">
        <div id="productClassify">
            <div class="container clearfix">
                <div class="menu">
                    <ol>
                        <li><img src="../static/images/nav-female.png" alt=""><a href="#">女装</a><a href="#">/女鞋</a></li>
                        <li><img src="../static/images/nav-man.png" alt=""><a href="#">男装</a><a href="#">/男鞋</a></li>
                        <li><img src="../static/images/nav-makeup.png" alt=""><a href="#">美妆</a><a href="#">/个护</a></li>
                        <li><img src="../static/images/nav-desc-package.png" alt=""><a href="#">配饰</a><a
                                href="#">/箱包</a>
                        </li>
                        <li><img src="../static/images/nav-lingshi.png" alt=""><a href="#">零食王国</a></li>
                        <li><img src="../static/images/nav-mami.png" alt=""><a href="#">母婴用品</a></li>
                        <li><img src="../static/images/nav-phone.png" alt=""><a href="#">手机</a><a href="#">/数码</a></li>
                        <li><img src="../static/images/nav-bra-wazi.png" alt=""><a href="#">内衣袜子</a></li>
                        <li><img src="../static/images/nav-home-happy.png" alt=""><a href="#">文娱</a><a href="#">/家居</a>
                        </li>
                    </ol>
                    <div class="rightBox">
                        <!-- <h4>女装</h4>
                        <ul>
                            <li>女装</li>
                        </ul>
                        <h4>女装</h4>
                        <ul>
                            <li>女装</li>
                        </ul> -->
                    </div>
                </div>
                <div class="activity">
                    <div class="up clearfix">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="../static/images/lunbo.jpeg" alt=""></div>
                                <div class="swiper-slide"><img
                                        src="http://img1.lukou.com/static/coupon/p/image_link/VEqObKBCzK2kcmyCC4ltdNCByInvsMJC.png"
                                        alt=""></div>
                            </div>
                            <!-- 如果需要分页器 -->
                            <div class="swiper-pagination"></div>

                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev" style="color: rgba(112, 112, 121, 0.8);"></div>
                            <div class="swiper-button-next" style="color: rgba(112, 112, 121, 0.8);"></div>

                        </div>
                        <!-- <di class="hotProduct"><img src="../static/images/lunbo.jpeg" alt=""></di> -->
                        <a href="#" class="ninePacks">
                            <!-- <h4>9块9包邮</h4>
                        <div class="noLoss">保你不吃亏</div>
                        <img src="../static/images/9.9.gif" alt=""> -->
                        </a>
                    </div>
                    <div class="down clearfix">
                        <div class="blockAd"></div>
                        <a class="bannerItem">
                            <div class="desc">
                                <h4>降温急救穿搭</h4>
                                <p>速来抢购~</p>
                                <span>Go</span>
                            </div>
                            <img src="../static/images/jiangwen.png" alt="">
                        </a>
                        <a class="bannerItem">
                            <div class="desc">
                                <h4>超值大额券</h4>
                                <p>优惠直击底价</p>
                                <span>Go</span>
                            </div>
                            <img src="../static/images/reduce100.png" alt="">
                        </a>
                        <a class="bannerItem">
                            <div class="desc">
                                <p>扫码下载App</p>
                                <p>发现更多惊喜</p>
                            </div>
                            <img src="../static/images/appQR.png" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 返回顶部 -->
        <div id="backTop">
            <img src="../static/images/back-top.png" alt="">
        </div>
        <!-- 小编精选 每天更新 -->
        <div id="goodSelect">
            <div class="container">
                <h3>小编精选 <span>每天更新</span> </h3>
                <div class="productsShow">
                    <ul>
                        <script type="text/html" id="product-list">
                            {{ each productListData }}
                            <li onclick="toDetail({{$value.id}})">
                                <img src="{{$value.image}}" alt="">
                                <div class="introduce">
                                    <div class="detailDesc">{{$value.title}}</div>
                                    <div class="platform clearfix">
                                        {{if $value.platform==1}}
                                        <span class="taobao"> 淘宝</span>
                                        {{ else }}
                                        <span class="taobao" style="background-color: #df2b2f;"> 天猫</span>
                                        {{/if}}
                                        {{if $value.largeCoupon == true}}
                                        <span class="largeCoupon">大额券</span>
                                        {{/if}}
                                        <span class="ship">包邮 </span> </div>
                                    <div class="price">
                                        <span class="RMB">￥</span>{{$value.price}}<span
                                            class="toFloat">.{{$value.float}}</span>
                                        <span class="peopleNum">{{$value.saleNum}}人已买</span>
                                        <span class="coupon"> {{$value.couponValue}}元券</span>
                                    </div>
                                </div>
                            </li>
                            {{/each}}
                        </script>

                    </ul>
                </div>
            </div>
        </div>
        <!-- 查看更多按钮 -->
        <div id="seeMore" onclick="seeMoreProduct()">
            查看更多
        </div>
    </div>

    <!-- 搜索******************* -->
    <script type="text/html" id="search-list">
        <!-- 返回顶部 -->
    <div id="backTop">
        <img src="../static/images/back-top.png" alt="">
    </div>
    <!-- 搜索条件 排序 -->
    <div id="goodSelect" 
    >
        <div class="container searchContainer">
            <div class="priceArrage">
                价格：<span>0-10</span>
                <span>10-25</span>
                <span>25-50</span>
                <span>80以上</span>
                <input type="text" name="minPrice" id="minPrice" placeholder="最低价">-
                <input type="text" name="maxPrice" id="maxPrice" placeholder="最高价">
                <input type="checkbox" name="hasCoupon">有优惠券
                <button type="button">确定</button>
                <button type="reset">清空</button>
            </div>
            <div class="classifyProduct">
                <ol class="clearfix">
                    <li class="on">综合</li>
                    <li>价格最低</li>
                    <li>销量最高</li>
                </ol>
            </div>
            <div class="productsShow">
                <ul>
                    {{ each productListData }}
                    <li data-id="{{$value.id}}">
                        <img src="{{$value.image}}" alt="">
                        <div class="introduce">
                            <div class="detailDesc">{{$value.title}}</div>
                            <div class="platform clearfix">
                                {{if $value.platform==1}}
                                <span class="taobao"> 淘宝</span>
                                {{ else }}
                                <span class="taobao" style="background-color: #df2b2f;"> 天猫</span>
                                {{/if}}
                                {{if $value.couponValue >= 50}}
                                <span class="largeCoupon">大额券</span>
                                {{/if}}
                                <span class="ship">包邮 </span> </div>
                            <div class="price">
                                <span class="RMB">￥</span>{{$value.price}}<span class="toFloat">.{{$value.float}}</span>
                                <span class="peopleNum">{{$value.saleNum}}人已买</span>
                                <span class="coupon"> {{$value.couponValue}}元券</span>
                            </div>
                        </div>
                    </li>
                    {{/each}}


                </ul>
            </div>
        </div>
    </div>
    <!-- 查看更多按钮 -->
    <div id="seeMore" onclick="seeMoreProduct()">查看更多</div>

    </script>

    <!-- 页脚 -->
    <div id="footer">
        <div class="container">
            <div class="logoApp clearfix">
                <img src="../static/images/logo-footer.png" alt="">
                <div class="fontDesc">
                    <h2>熊猫优选</h2>
                    <p>年轻人网购首选</p>
                    <p> 购物领券更省钱</p>
                </div>
                <a class="download">|&emsp;下载APP</a>
            </div>
            <div class="copyReg"><img src="../static/images/gongan.png" alt="">浙公安网备案 33010602009949号 | ICP备案号:
                浙ICP备17012864号-1 | <img src="../static/images/zhengzhao.png" alt=""> 证照信息</div>
        </div>
    </div>
    <!-- 全国安全可信网站 -->
    <div id="safe">
        <div class="container">
            <a href="https://xinyong.yunaq.com/certificate?site=www.xiongmaoyouxuan.com"><img
                    src="../static/images/safe.png" alt=""></a>
        </div>
    </div>

    <script src="../js/template-web.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script>
        indexPageProducts()
        indexPageMenu()
        var ok = new Swiper('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: true,
            effect: 'slide',
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },


            on: {
                init: function (swiper) {
                    //Swiper初始化了
                    console.log('当前的slide序号是' + this
                        .activeIndex); //或者swiper.activeIndex，swiper与this都可指代当前swiper实例
                    this.emit('transitionEnd'); //在初始化时触发一次transitionEnd事件，需要先设置transitionEnd

                },
            },
        })
    </script>
</body>

</html>